<template>
    <div class="enterBox">
        <div class="shopCar">
<!--            <img src="./img/购物车 (1).png" alt="">-->
            <a-icon class="car" type="shopping-cart" />
        </div>
        <div class="enterLine"></div>
        <div class="enter">
            <a type="primary" @click="showModal" style="color:black" v-if="!$store.state.isLogin">
                登录/注册 <span class="userBox">
                <a-icon type="user" />
            </span>
            </a>
            <span v-else>

                <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      用户名：{{userInfo.nickname}}
                <a-avatar :src="userInfo.avatarUrl"/><a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;" @click="toMine">个人中心</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;" @click="toIndex">退出登录</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">3rd menu item</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
            </span>
            <a-modal v-model="visible"  @ok="handleOk" :footer="null">
                <a-form layout="inline" :form="form" @submit="handleSubmit">
                    <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                        <a-input
                                v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                                placeholder="Username"
                        >
                            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                        <a-input
                                v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                                type="password"
                                placeholder="Password"
                        >
                            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                            Log in
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-modal>
        </div>


    </div>
</template>

<script>
    import {login,getUserInfo,logOut} from "../../api/api";

    function hasErrors(fieldsError) {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    export default {

        name: "Register",
        data() {
            return {
                visible: false,
                hasErrors,
                form: this.$form.createForm(this, { name: 'horizontal_login' }),
                isLogin:false,
                userInfo:""
            };
        },
        created() {
                getUserInfo().then(res=>{
                    console.log(res)
                    if(res.code==0){
                        console.log(this.$store.state.isLogin)
                        this.userInfo =res.userInfo
                    }
                })

        },
        mounted() {
            this.$nextTick(() => {
                // To disabled submit button at the beginning.
                this.form.validateFields();
            });
        },

        methods: {
            toIndex(){
                // puitLogin()00
                logOut().then(res=>{
                    console.log(res)
                    this.$store.state.isLogin=false;
                    this.$router.push("/")
                })

            },
            toMine(){
                this.$router.push("/mine")
            },
            showModal() {
                this.visible = true;
            },
            handleOk(e) {
                console.log(e);
                this.visible = false;
            },
            // Only show error after a field is touched.
            userNameError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('userName') && getFieldError('userName');
            },
            // Only show error after a field is touched.
            passwordError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        login(values.userName,values.password).then(res=>{
                            console.log(res)
                            if(res.code==0){
                                this.$message.success(res.msg)
                                this.visible = false
                                this.$store.state.isLogin = true;
                                this.userInfo=res.userInfo
                            }
                        })
                    }
                });
            },

        },

    }
</script>

<style scoped>
    .userBox{
        margin: -5px 0 0 10px;
        width: 30px;
        height: 30px;
        background-color: #999;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
    }
    .enterBox{
        float: right;
        margin-top: 35px;
        margin-right: 120px;
        font-size: 13px;
    }
    .enterBox>div{
        float: left;
    }
    .enterBox:hover{
        cursor: pointer;
    }
    .shopCar>img{
        width: 18px;
        height: 18px;
    }
    .enterLine{
        float: left;
        margin: 4px 10px;
        width: 1px;
        height: 14px;
        background-color: #ccc;
    }
    .car{
        font-size: 16px;
    }
</style>